<template>
  <div class="app-container">
    <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="7">
      <el-card class="box-card" shadow="never" style="margin-right: 20px">
        <el-tree
          ref="tree"
          :data="list1"
          :props="defaultProps"
          show-checkbox
          node-key="id"
          @check-change="handleCheckChange"
        />
        <el-button type="success" style="margin-top: 10px" @click="recommend()">
          智能推荐</el-button
        >
        <!--        <el-button @click="getCheckedKeys">通过 key 获取</el-button>-->
      </el-card>
    </el-col>
    <el-col
      :xs="24"
      :sm="24"
      :md="16"
      :lg="16"
      :xl="17"
      style="margin-bottom: 10px"
    >
      <el-card class="box-card" shadow="never">
        <el-table
          ref="table"
          v-loading="crud.loading"
          :data="mapplist"
          style="width: 100%"
          @selection-change="crud.selectionChangeHandler"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column
            :show-overflow-tooltip="true"
            prop="point"
            label="检查点"
          />
          <el-table-column
            :show-overflow-tooltip="true"
            prop="caseId"
            label="案例编号"
          />
          <el-table-column prop="caseName" label="案例名称" />
          <el-table-column
            :show-overflow-tooltip="true"
            prop="testMethod"
            width="100"
            label="测试方法"
          />
          <el-table-column
            :show-overflow-tooltip="true"
            width="135"
            prop="scope"
            label="适用范围"
          />
          <el-table-column
            :show-overflow-tooltip="true"
            prop="riskLevel"
            label="风险等级"
          />
          <el-table-column
            :show-overflow-tooltip="true"
            prop="applyType"
            label="适用类型"
          />
          <el-table-column
            :show-overflow-tooltip="true"
            prop="correspondence"
            label="对应关系"
          />
        </el-table>
      </el-card>
    </el-col>
  </div>
</template>
<script>
import gettesttype from "@/api/system/safetesttype";
import CRUD, { presenter, header, form, crud } from "@crud/crud";
import Treeselect from "@riophae/vue-treeselect";
import DateRangePicker from "@/components/DateRangePicker";
import { mapGetters } from "vuex";
export default {
  name: "User",
  components: {
    Treeselect,
    DateRangePicker,
  },
  cruds() {
    return CRUD({
      title: "安全",
      url: "api/safeTestType/query",
      //   params: {
      //     docType: "0",
      //   },
      crudMethod: { ...gettesttype },
    });
  },
  mixins: [presenter(), header(), form(), crud()],
  data() {
    return {
      mapplist: [], // 列表展示
      tableitemid: [], // 树形图id
      list1: [],
      defaultProps: { children: "children", label: "name" },
    };
  },
  computed: {
    ...mapGetters(["user", "documentApi"]),
  },
  created() {
    console.log(this.crud);
    // this.crud.msg.add = "新增成功，默认密码：123456";
  },
  mounted() {
    const list = [];
    gettesttype
      .getquery({
        // todo  应该是需要传参的
      })
      .then((res) => {
        console.log(res);
        this.list1 = res;

        // console.log(c[i].children);
        // d.push(c[i].children);
        // console.log(d);

        // this.crud.notify(
        //   this.dict.label.user_status[val] + "成功",
        //   CRUD.NOTIFICATION_TYPE.SUCCESS
        // );
      })
      .catch((err) => {
        // 应该是没传参的问题  进catch了
        console.log("1113");
        // data.enabled = !data.enabled;
      });
  },
  methods: {
    // 所有选中子节点集合, 选中子集集合
    getCheckedKeys() {
      console.log(this.$refs.tree.getCheckedKeys());
    },
    handleCheckChange(data) {
      // debugger
      console.log(data);
      this.tableitemid = data.id;
      console.log(this.tableitemid);
    },
    // 智能推荐按钮
    recommend() {
      debugger;
      let ids = "";
      const listId = this.$refs.tree.getCheckedKeys();
      console.log(listId);
      for (let i = 0; i < listId.length; i++) {
        ids = ids + "," + listId[i];
        console.log(ids);
      }
      gettesttype
        .getqueryById({
          // todo  应该是需要传参的
          typeId: ids,
        })
        .then((res) => {
          console.log(res);
          this.mapplist = res;
          console.log(this.mapplist);
        })
        .catch((err) => {
          // 应该是没传参的问题  进catch了
          console.log("1113");
          // data.enabled = !data.enabled;
        });
    },
  },
};
</script>